<template>
  <div class="w-full h-full flex items-center justify-between">
    <!-- 左侧区域 -->
    <div class="flex items-center space-x-6">
      <!-- 面包屑导航 -->
      <n-breadcrumb>
        <n-breadcrumb-item>首页</n-breadcrumb-item>
        <n-breadcrumb-item>仪表盘</n-breadcrumb-item>
      </n-breadcrumb>
    </div>

    <!-- 右侧区域 -->
    <div class="flex items-center space-x-4">
      <!-- 搜索框 -->
      <div class="hidden md:block">
        <n-input
            v-model:value="searchValue"
            placeholder="搜索..."
            class="w-64"
            clearable
        >
          <template #prefix>
            <n-icon :component="SearchIcon"/>
          </template>
        </n-input>
      </div>

      <!-- 通知按钮 -->
      <n-badge :value="3" :max="99">
        <n-button text size="large">
          <template #icon>
            <n-icon :component="NotificationsIcon"/>
          </template>
        </n-button>
      </n-badge>

      <!-- 主题切换按钮 -->
      <n-button text size="large" @click="settingStore.toggleTheme()">
        <template #icon>
          <n-icon :component="settingStore.isDark ? MoonIcon: SunnyIcon"/>
        </template>
      </n-button>

      <!-- 用户菜单 -->
      <n-dropdown :options="userMenuOptions" @select="handleUserMenuSelect">
        <n-button text class="flex items-center space-x-2">
          <n-avatar size="small" round>
            <n-icon :component="PersonIcon"/>
          </n-avatar>
          <div class="hidden sm:block text-left ml-2">
            <n-text class="text-sm font-medium">Admin</n-text>
          </div>
        </n-button>
      </n-dropdown>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {
  MoonOutline as MoonIcon,
  NotificationsOutline as NotificationsIcon,
  PersonOutline as PersonIcon,
  SearchOutline as SearchIcon,
  SunnyOutline as SunnyIcon
} from '@vicons/ionicons5'
import {useAuthStore, useSettingStore} from "@/store/index.js";
import {useRouter} from "vue-router";
import {routeMeta} from "@/router/routes.js";

const settingStore = useSettingStore()
const authStore = useAuthStore()
const router = useRouter()

// 响应式状态
const searchValue = ref('')

// 用户菜单选项
const userMenuOptions = [
  {
    label: '个人中心',
    key: 'profile'
  },
  {
    label: '设置',
    key: 'settings'
  },
  {
    type: 'divider'
  },
  {
    label: '退出登录',
    key: 'logout'
  }
]

// 处理用户菜单点击
const handleUserMenuSelect = (key) => {
  console.log('用户菜单点击:', key)
  if (key === 'logout') {
    // 处理退出登录
    authStore.logout()
    router.replace({name: routeMeta.name.LOGIN})
  }
}
</script>